<template>
  <div class="plan-content">
    <!-- 顶部工具栏 -->
    <header class="plan-header">
      <div class="header-content">
        <div class="header-left">
          <div class="plan-title-wrapper">
            <h1
              v-if="!isEditingTitle"
              class="plan-title editable-title"
              @click="startEditTitle"
              title="点击编辑名称"
            >
              {{ planInfo.title || '未命名行程' }}
              <svg class="edit-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </h1>
            <input
              v-else
              ref="titleInputRef"
              v-model="editingTitle"
              class="plan-title-input"
              @blur="saveTitle"
              @keyup.enter="saveTitle"
              @keyup.esc="cancelEditTitle"
            />
          </div>
          <div class="plan-meta">
            <span class="meta-item" v-if="planInfo.startDate && planInfo.endDate">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                <polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ formatDateRange(planInfo.startDate, planInfo.endDate) }}
            </span>
            <span class="meta-item" v-if="participants.length > 0">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ participants.length }} 人参与
            </span>
            <span class="meta-item" v-if="planInfo.destination">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
              {{ planInfo.destination }}
            </span>
          </div>
        </div>
        <div class="header-actions">
          <button class="action-btn" @click="handleInvite" v-if="participants.length > 0">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="8.5" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              <path d="M20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            邀请成员
          </button>
          <button class="action-btn primary" @click="handleExport">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            导出行程
          </button>
        </div>
      </div>
    </header>

    <div class="plan-container">
      <!-- 左侧边栏 - 参与者列表（群聊时显示） -->
      <aside class="participants-sidebar" v-if="participants.length > 0">
        <div class="sidebar-header">
          <h3>参与者</h3>
          <span class="participant-count">{{ participants.length }}</span>
        </div>
        <div class="participants-list">
          <div
            v-for="participant in participants"
            :key="participant.id"
            :class="['participant-item', { online: participant.isOnline }]"
          >
            <div class="participant-avatar" v-if="!participant.avatar">
              {{ participant.name?.charAt(0) || 'U' }}
            </div>
            <img v-else :src="participant.avatar" :alt="participant.name" class="participant-avatar-img" />
            <div class="participant-info">
              <div class="participant-name">{{ participant.name }}</div>
              <div class="participant-role">{{ participant.role }}</div>
            </div>
            <div v-if="participant.isOnline" class="online-indicator"></div>
          </div>
        </div>
      </aside>

      <!-- 主内容区 -->
      <main class="plan-main" :class="{ 'with-sidebar': participants.length > 0 }">
        <!-- 标签页 -->
        <div class="plan-tabs">
          <button
            v-for="tab in tabs"
            :key="tab.key"
            :class="['tab-btn', { active: activeTab === tab.key }]"
            @click="activeTab = tab.key"
          >
            {{ tab.label }}
          </button>
        </div>

        <!-- 行程内容 -->
        <div v-if="activeTab === 'plan'" class="plan-content-section">
          <div class="markdown-editor-container">
            <div class="editor-toolbar">
              <button class="toolbar-btn" @click="handleSave" title="保存">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <polyline points="17 21 17 13 7 13 7 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <polyline points="7 3 7 8 15 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                保存
              </button>
              <button class="toolbar-btn" @click="handlePreview" title="预览">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                预览
              </button>
            </div>
            <textarea
              v-model="localMarkdownContent"
              class="markdown-editor"
              placeholder="在这里编辑你的行程计划...&#10;&#10;支持 Markdown 格式：&#10;- 使用 # 标题&#10;- 使用 - 列表&#10;- 使用 ** 加粗"
              @input="handleContentChange"
            ></textarea>
          </div>
        </div>

        <!-- 投票区 -->
        <div v-if="activeTab === 'votes'" class="plan-content-section">
          <div class="votes-section">
            <div class="section-header">
              <h3>进行中的投票</h3>
              <button class="create-vote-btn" @click="handleCreateVote">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                创建投票
              </button>
            </div>
            <div v-if="votes.length === 0" class="empty-votes">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 11l3 3L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <p>还没有投票</p>
            </div>
            <div v-else class="votes-list">
              <div v-for="vote in votes" :key="vote.id" class="vote-item">
                <div class="vote-header">
                  <h4 class="vote-title">{{ vote.title }}</h4>
                  <span class="vote-status" :class="vote.status">{{ vote.status === 'active' ? '进行中' : '已结束' }}</span>
                </div>
                <p class="vote-description">{{ vote.description }}</p>
                <div class="vote-options">
                  <div
                    v-for="option in vote.options"
                    :key="option.id"
                    class="vote-option"
                    @click="handleVote(option.id, vote.id)"
                  >
                    <div class="option-content">
                      <span class="option-text">{{ option.text }}</span>
                      <div class="option-bar">
                        <div
                          class="option-progress"
                          :style="{ width: `${vote.totalVotes > 0 ? (option.votes / vote.totalVotes) * 100 : 0}%` }"
                        ></div>
                      </div>
                    </div>
                    <div class="option-stats">
                      <span class="vote-count">{{ option.votes }} 票</span>
                      <span class="vote-percent">{{ vote.totalVotes > 0 ? Math.round((option.votes / vote.totalVotes) * 100) : 0 }}%</span>
                    </div>
                  </div>
                </div>
                <div class="vote-footer">
                  <span class="vote-total">总投票数：{{ vote.totalVotes }}</span>
                  <span class="vote-deadline">截止时间：{{ formatDate(vote.deadline) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 讨论区 -->
        <div v-if="activeTab === 'discussion'" class="plan-content-section">
          <div class="discussion-section">
            <div class="discussion-input">
              <textarea
                v-model="newComment"
                placeholder="发表你的看法..."
                class="comment-input"
                rows="3"
              ></textarea>
              <button class="send-btn" @click="handleSendComment">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <line x1="22" y1="2" x2="11" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <polygon points="22 2 15 22 11 13 2 9 22 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                发送
              </button>
            </div>
            <div class="comments-list">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-avatar" v-if="!comment.userAvatar">
                  {{ comment.userName?.charAt(0) || 'U' }}
                </div>
                <img v-else :src="comment.userAvatar" :alt="comment.userName" class="comment-avatar-img" />
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-author">{{ comment.userName }}</span>
                    <span class="comment-time">{{ formatTime(comment.createdTime) }}</span>
                  </div>
                  <p class="comment-text">{{ comment.content }}</p>
                  <div class="comment-actions">
                    <button class="action-link" @click="handleReply(comment.id)">
                      回复
                    </button>
                    <button class="action-link" @click="handleLike(comment.id)">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                      {{ comment.likeCount || 0 }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 任务分配 -->
        <div v-if="activeTab === 'tasks'" class="plan-content-section">
          <div class="tasks-section">
            <div class="section-header">
              <h3>任务分配</h3>
              <button class="create-task-btn" @click="handleCreateTask">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                创建任务
              </button>
            </div>
            <div v-if="tasks.length === 0" class="empty-tasks">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <p>还没有任务</p>
            </div>
            <div v-else class="tasks-list">
              <div
                v-for="task in tasks"
                :key="task.id"
                :class="['task-item', { completed: task.status === 'completed' }]"
              >
                <div class="task-checkbox" @click="handleToggleTask(task.id)">
                  <svg v-if="task.status === 'completed'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="20 6 9 17 4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="task-content">
                  <h4 class="task-title">{{ task.title }}</h4>
                  <p class="task-description">{{ task.description }}</p>
                  <div class="task-meta">
                    <span class="task-assignee">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      {{ task.assignee }}
                    </span>
                    <span class="task-deadline">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                        <polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                      {{ formatDate(task.deadline) }}
                    </span>
                  </div>
                </div>
                <div class="task-status" :class="task.status">
                  {{ task.status === 'completed' ? '已完成' : task.status === 'in-progress' ? '进行中' : '待开始' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'

const props = defineProps({
  planInfo: {
    type: Object,
    required: true
  },
  participants: {
    type: Array,
    default: () => []
  },
  sessionId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update-plan'])

// 响应式数据
const activeTab = ref('plan')
const newComment = ref('')
const localMarkdownContent = ref(props.planInfo.markdownContent || '')

// 标题编辑相关
const isEditingTitle = ref(false)
const editingTitle = ref('')
const titleInputRef = ref(null)

const tabs = [
  { key: 'plan', label: '行程计划' },
  { key: 'votes', label: '投票' },
  { key: 'discussion', label: '讨论' },
  { key: 'tasks', label: '任务' }
]

// 投票（模拟数据）
const votes = ref([
  {
    id: 1,
    title: '选择第一天午餐地点',
    description: '请大家投票选择第一天的午餐地点',
    status: 'active',
    deadline: new Date(Date.now() + 3 * 86400000).toISOString(),
    totalVotes: 8,
    options: [
      { id: 1, text: '西湖边的餐厅A', votes: 5 },
      { id: 2, text: '市区餐厅B', votes: 3 }
    ]
  }
])

// 评论（模拟数据）
const comments = ref([
  {
    id: 1,
    userName: '小李',
    userAvatar: null,
    content: '我觉得第一天可以增加一个景点，时间应该来得及',
    createdTime: new Date(Date.now() - 2 * 3600000).toISOString(),
    likeCount: 2
  },
  {
    id: 2,
    userName: '小张',
    userAvatar: null,
    content: '同意，另外建议晚上可以去看夜景',
    createdTime: new Date(Date.now() - 1 * 3600000).toISOString(),
    likeCount: 1
  }
])

// 任务（模拟数据）
const tasks = ref([
  {
    id: 1,
    title: '预订酒店',
    description: '预订3晚的酒店，位置靠近市中心',
    assignee: '旅行达人小王',
    deadline: new Date(Date.now() + 2 * 86400000).toISOString(),
    status: 'in-progress'
  },
  {
    id: 2,
    title: '购买往返车票',
    description: '购买往返高铁票',
    assignee: '小李',
    deadline: new Date(Date.now() + 1 * 86400000).toISOString(),
    status: 'pending'
  },
  {
    id: 3,
    title: '查看天气预报',
    description: '查看目的地未来一周的天气情况',
    assignee: '小张',
    deadline: new Date(Date.now() + 3 * 86400000).toISOString(),
    status: 'completed'
  }
])

// 监听 planInfo 变化，更新本地内容
watch(() => props.planInfo.markdownContent, (newContent) => {
  if (newContent !== localMarkdownContent.value) {
    localMarkdownContent.value = newContent || ''
  }
}, { immediate: true })

// 方法
function startEditTitle() {
  isEditingTitle.value = true
  editingTitle.value = props.planInfo.title || '未命名行程'
  nextTick(() => {
    if (titleInputRef.value) {
      titleInputRef.value.focus()
      titleInputRef.value.select()
    }
  })
}

function saveTitle() {
  if (editingTitle.value.trim()) {
    emit('update-plan', {
      title: editingTitle.value.trim()
    })
  }
  isEditingTitle.value = false
}

function cancelEditTitle() {
  isEditingTitle.value = false
  editingTitle.value = ''
}

function handleInvite() {
  // TODO: 打开邀请对话框
  console.log('邀请成员')
}

function handleExport() {
  // TODO: 导出行程为PDF/Markdown
  console.log('导出行程')
}

function handleSave() {
  // TODO: 保存行程内容
  emit('update-plan', {
    markdownContent: localMarkdownContent.value
  })
  console.log('保存行程')
}

function handlePreview() {
  // TODO: 预览Markdown渲染结果
  console.log('预览')
}

function handleContentChange() {
  // 实时更新计划内容
  emit('update-plan', {
    markdownContent: localMarkdownContent.value
  })
}

function handleCreateVote() {
  // TODO: 打开创建投票对话框
  console.log('创建投票')
}

function handleVote(optionId, voteId) {
  // TODO: 提交投票
  console.log('投票:', optionId, voteId)
}

function handleSendComment() {
  if (!newComment.value.trim()) return

  // TODO: 发送评论
  comments.value.unshift({
    id: Date.now(),
    userName: '我',
    userAvatar: null,
    content: newComment.value,
    createdTime: new Date().toISOString(),
    likeCount: 0
  })
  newComment.value = ''
}

function handleReply(commentId) {
  // TODO: 回复评论
  console.log('回复:', commentId)
}

function handleLike(commentId) {
  // TODO: 点赞评论
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.likeCount = (comment.likeCount || 0) + 1
  }
}

function handleCreateTask() {
  // TODO: 打开创建任务对话框
  console.log('创建任务')
}

function handleToggleTask(taskId) {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.status = task.status === 'completed' ? 'pending' : 'completed'
  }
}

function formatDateRange(start, end) {
  if (!start || !end) return '未设置日期'
  const startDate = new Date(start)
  const endDate = new Date(end)
  return `${startDate.getMonth() + 1}/${startDate.getDate()} - ${endDate.getMonth() + 1}/${endDate.getDate()}`
}

function formatDate(date) {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getMonth() + 1}月${d.getDate()}日`
}

function formatTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)

  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  return formatDate(time)
}
</script>

<style scoped>
.plan-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #f9fafb;
}

.plan-header {
  background: #ffffff;
  border-bottom: 1px solid #eef0f5;
  padding: 20px 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  width: 100%;
  margin: 0;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.plan-title-wrapper {
  position: relative;
  margin-bottom: 8px;
}

.plan-title {
  font-size: 24px;
  font-weight: 700;
  color: #2b2f36;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.plan-title.editable-title {
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  padding-right: 28px;
}

.plan-title.editable-title:hover {
  color: #667eea;
}

.edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #9ca3af;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plan-title.editable-title:hover .edit-icon {
  opacity: 1;
}

.plan-title-input {
  font-size: 24px;
  font-weight: 700;
  color: #2b2f36;
  background: transparent;
  border: 2px solid #667eea;
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
  width: 100%;
  max-width: 600px;
  font-family: inherit;
  box-sizing: border-box;
}

.plan-meta {
  display: flex;
  gap: 24px;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6b7280;
}
  
.meta-item svg {
  width: 16px;
  height: 16px;
}

.header-actions {
  margin-right: 50px;
  display: flex;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-color: transparent;
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.action-btn svg {
  width: 18px;
  height: 18px;
}

.plan-container {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

.participants-sidebar {
  width: 280px;
  min-width: 240px;
  background: #ffffff;
  border-right: 1px solid #eef0f5;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
  align-self: stretch;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f5;
}

.sidebar-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2b2f36;
  margin: 0;
}

.participant-count {
  font-size: 14px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 12px;
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.participant-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
  position: relative;
}

.participant-item:hover {
  background: #f9fafb;
}

.participant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.participant-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.participant-info {
  flex: 1;
  min-width: 0;
}

.participant-name {
  font-size: 14px;
  font-weight: 500;
  color: #2b2f36;
  margin-bottom: 2px;
}

.participant-role {
  font-size: 12px;
  color: #9ca3af;
}

.online-indicator {
  position: absolute;
  bottom: 8px;
  left: 36px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.plan-main {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-main.with-sidebar {
  /* 当有侧边栏时的样式调整 */
}

.plan-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 32px;
  border-bottom: 1px solid #eef0f5;
  background: #f9fafb;
  flex-shrink: 0;
}

.tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: #667eea;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

.plan-content-section {
  flex: 1;
  min-height: 0;
  padding: 24px 32px;
  padding-top: 32px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.plan-content-section * {
  box-sizing: border-box;
}

.markdown-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  width: 100%;
  flex: 1;
}

.editor-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #eef0f5;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.markdown-editor {
  flex: 1;
  width: 100%;
  padding: 20px;
  border: 1px solid #eef0f5;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-family: 'Monaco', 'Menlo', monospace;
  line-height: 1.6;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.markdown-editor:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.votes-section,
.discussion-section,
.tasks-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef0f5;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2b2f36;
  margin: 0;
}

.create-vote-btn,
.create-task-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-vote-btn:hover,
.create-task-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.create-vote-btn svg,
.create-task-btn svg {
  width: 16px;
  height: 16px;
}

.empty-votes,
.empty-tasks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.empty-votes svg,
.empty-tasks svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: #d1d5db;
}

.empty-votes p,
.empty-tasks p {
  font-size: 16px;
  color: #6b7280;
}

.votes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vote-item {
  background: #f9fafb;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 20px;
}

.vote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vote-title {
  font-size: 16px;
  font-weight: 600;
  color: #2b2f36;
  margin: 0;
}

.vote-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.vote-status.active {
  background: #dbeafe;
  color: #1e40af;
}

.vote-status.ended {
  background: #f3f4f6;
  color: #6b7280;
}

.vote-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 16px 0;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.vote-option {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vote-option:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.option-content {
  margin-bottom: 8px;
}

.option-text {
  font-size: 14px;
  color: #2b2f36;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.option-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.option-progress {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.option-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}

.vote-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #eef0f5;
  font-size: 12px;
  color: #9ca3af;
}

.discussion-input {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.comment-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
}

.comment-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  height: fit-content;
}

.send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.send-btn svg {
  width: 16px;
  height: 16px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.comment-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.comment-author {
  font-size: 14px;
  font-weight: 600;
  color: #2b2f36;
}

.comment-time {
  font-size: 12px;
  color: #9ca3af;
}

.comment-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 8px 0;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.action-link {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s ease;
}

.action-link:hover {
  color: #667eea;
}

.action-link svg {
  width: 14px;
  height: 14px;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  gap: 12px;
  background: #f9fafb;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.task-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.task-item.completed {
  opacity: 0.7;
}

.task-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.task-item.completed .task-checkbox {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.task-checkbox svg {
  width: 16px;
  height: 16px;
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 16px;
  font-weight: 600;
  color: #2b2f36;
  margin: 0 0 6px 0;
}

.task-item.completed .task-title {
  text-decoration: line-through;
  color: #9ca3af;
}

.task-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 12px 0;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.task-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #9ca3af;
}

.task-assignee,
.task-deadline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-assignee svg,
.task-deadline svg {
  width: 14px;
  height: 14px;
}

.task-status {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  height: fit-content;
}

.task-status.pending {
  background: #fef3c7;
  color: #d97706;
}

.task-status.in-progress {
  background: #dbeafe;
  color: #1e40af;
}

.task-status.completed {
  background: #d1fae5;
  color: #059669;
}
</style>


